import { Observer } from "mobx-vue"
import { Component, Vue } from "vue-property-decorator";
require('./imagePreview.scss')
import { imagesOssPrefix } from "src/utils/ztbase";

@Observer
@Component({
  props: {
    url: {
      type: String,
      default: null
    },
    clear: {
      type: Boolean,
      default: true
    }
  }
})
export default class CsjImagePreview extends Vue {
  isShowModel: boolean = false;
  loading: boolean = true;
  previewStyle: any = 'width:100%';
  async mounted() {
    let vm: any = this;
    vm.isShowModel = true;
    var img = new Image();
    img.src = vm.url;
    img.onload = function () {
      let width = img.width;
      let height = img.height;
      if (width > 800 || height > 600) {
        if (width >= height) {
          vm.previewStyle = 'width:100%';
        } else {
          vm.previewStyle = 'height:600px';
        }
      } else {
        vm.previewStyle = '';
      }
      vm.loading = false;
    }
  }
  //关闭
  close() {
    let vm: any = this;
    let xwindow: any = window
    vm.isShowModel = false;
    if (!vm.clear) {
      xwindow.clearBodyStyle()
    }
    vm.$emit('close')
  }
  // 图片补全前缀
  imagePrefix(url, zoomScale) {
    return imagesOssPrefix(url, zoomScale)
  }
}